<template>
  <div :style="outModuleCss">
    <div :style="moduleBgCss" class="module-bg"></div>
    <div class="coupon-section">
      <div class="section-content">
        <div class="section-header" v-show="propsData.params.showModuleName">
          <moduleHeader
            :propsData="propsData"
            :moduleName="propsData.params.moduleName"
            @editModuleHeader="editModuleHeader"
          ></moduleHeader>
        </div>
        <!-- 优惠券展示 -->
        <!-- 一列模板 -->
        <defaultTemplate
          v-if="propsData.params.sortType == 1"
          :propsData="propsData"
        ></defaultTemplate>
        <!-- 两列模板  -->
        <sortOfTwo
          v-if="propsData.params.sortType == 2"
          :propsData="propsData"
        ></sortOfTwo>
        <!-- 三列模板  -->
        <sortOfThree
          v-if="propsData.params.sortType == 3"
          :propsData="propsData"
        ></sortOfThree>
        <!-- 滑动模板ƒ -->
        <sortOfSlide
          v-if="propsData.params.sortType == 4"
          :propsData="propsData"
        ></sortOfSlide>
      </div>
    </div>
  </div>
</template>

<script>
import defaultTemplate from "./templates/default.vue";
import sortOfTwo from "./templates/sortOfTwo.vue";
import sortOfThree from "./templates/sortOfThree.vue";
import sortOfSlide from "./templates/sortOfSlide.vue";
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";
import moduleHeader from "@/components/DiyNew/diy/baseControl/moduleHeader/index.vue";

export default {
  name: "marketCoupon",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  components: {
    defaultTemplate,
    sortOfTwo,
    sortOfThree,
    sortOfSlide,
    moduleHeader,
  },
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    editModuleHeader(e) {
      this.$emit("chooseMoudle", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}
.coupon-section {
  width: 100%;
  padding: 11px 12px;
  // background-color: #ffffff;
  overflow: hidden;

  .section-content {
    width: 100%;
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 11px;
      p {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }
      p:nth-child(2) {
        display: flex;
        align-items: center;
        line-height: 14px;
        color: #888888;
        font-weight: 400;
        font-size: 14px;
        .iconfont {
          font-size: 10px;
        }
      }
    }
    .section-body {
      .coupon-box {
        width: 93.6%;
        height: 92px;
        position: relative;
        .coupon-bg {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .coupon-content {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 11;
          display: flex;
          align-items: center;
          padding: 0 3.46% 0 9.6%;
          .price {
            font-size: 30px;
            font-weight: bold;
            color: #ec2827;
            display: flex;
            align-items: baseline;
            line-height: 1;

            span:first-child {
              font-size: 16px;
            }
          }
          .info {
            color: #ffffff;
            line-height: 20px;
            flex: 1;
            text-align: left;
            padding-left: 14.9%;
            p:first-child {
              margin-bottom: 2px;
              font-size: 16px;
              font-weight: bold;
            }
            p:last-child {
              margin-bottom: 0;
              font-size: 14px;
            }
          }
          .receive {
            width: 62px;
            height: 62px;
            background: linear-gradient(
              180deg,
              #ffefd0 0%,
              #ffe2b6 50%,
              #fed59b 100%
            );
            border-radius: 50%;
            opacity: 0.91;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            span {
              width: 32px;
              font-size: 16px;
              color: #ec2827;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
